<style>
</style>
<template>
  <el-scrollbar>
    <el-row :gutter="15">
      <el-col :span="24" class="col-xs-12">
        <Portlet>
          <el-form ref="searchForm" class="el-form-col search-form" :model="search">
            <el-row :gutter="15" style="position:relative;">
              <el-col :lg="4" :md="6">
                <el-form-item prop="orderNo" style="position: relative">
                  <el-input v-model="search.orderNo" type="textarea" :rows="4" placeholder="订单号  (支持多单查询，用英文逗号分隔)"
                            clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="consigneeName">
                  <el-input v-model="search.consigneeName" placeholder="客户姓名" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="consigneePhone">
                  <el-input v-model="search.consigneePhone" placeholder="客户电话" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
                <el-form-item>
                  <el-row class="search-btns" :gutter="5">
                    <el-col :span="8">
                      <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button @click="resetFields" plain>重置</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="serviceProvider">
                  <el-input v-model="search.serviceProvider" placeholder="服务方" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="serviceProviderPhone">
                  <el-input v-model="search.serviceProviderPhone" placeholder="服务方电话" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
                <el-form-item>
                  <el-row class="search-btns" :gutter="5">
                    <el-col :span="8">
                      <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                    </el-col>
                    <el-col :span="8">
                      <el-button @click="resetFields" plain>重置</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="businessNo">
                  <el-select v-model="search.businessNo" clearable placeholder="业务类型">
                    <el-option
                      v-for="item in businessArr"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="serviceNo">
                  <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                    <el-option
                      v-for="item in serviceArr"
                      :key="item.value"
                      :label="item.text"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="address">
                  <cascade-address :level="3" v-model="search.address" placeholder="客户地址"></cascade-address>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="startPlaceholder">
                  <el-date-picker type="date"
                                  :placeholder="startPlaceholder"
                                  value-format="yyyy-MM-dd"
                                  v-model="search.startPlaceholder" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :lg="4" :md="6">
                <el-form-item prop="endPlaceholder">
                  <el-date-picker type="date"
                                  :placeholder="endPlaceholder"
                                  v-model="search.endPlaceholder"
                                  value-format="yyyy-MM-dd"
                                  :picker-options="{disabledDate}" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </Portlet>
      </el-col>
      <el-col :span="24" style="min-width:1280px;">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="退款中" name="5">
            <refund-table-modal ref="refundTableModal" :orderState="orderState" :tableData="tableData"
                                @refresh="httpGetTableData"></refund-table-modal>
          </el-tab-pane>
          <el-tab-pane label="仲裁中" name="6">
            <refund-table-modal ref="refundTableModal" :orderState="orderState"
                                :tableData="tableData"></refund-table-modal>
          </el-tab-pane>
          <el-tab-pane label="已处理" name="7">
            <refund-table-modal ref="refundTableModal" :orderState="orderState"
                                :tableData="tableData"></refund-table-modal>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="24">
        <div class="pull-right" style="margin: 10px 0">
          <Pagination :perItem="params.pageSize" :total-item="totalItem" @pagination="page"
          @sizeChange="setSizeChange"></Pagination>
        </div>
        <div class="clearfix"></div>
      </el-col>
    </el-row>
  </el-scrollbar>
</template>
<script>
import Pagination from '@/components/Pagination'
import {merge, copy, dotData} from '@/utils'
import {getFhbBsteType, getFhbServiceType, getSubDictListOfParentCode} from '@/utils/selectOptions'
import {filterDayHours, filterDataBaseDictionary, unixTimestampFilter} from '@/filters'
import moment from 'moment'
import RefundTableModal from '@/views/fhb/refund/RefundTableModal'

export default {
  name: 'afterServiceRefundIndex',
  components: {
    Pagination,
    RefundTableModal
  },
  filters: {
    filterDayHours,
    filterDataBaseDictionary,
    unixTimestampFilter
  },
  data() {
    return {
      searchLoading: false,
      isOpen: false,
      activeName: '5',
      search: {
        orderNo: '',
        consigneeName: '',
        consigneePhone: '',
        serviceProvider: '',
        serviceProviderPhone: '',
        businessNo: '',
        serviceNo: '',
        address: [],
        startPlaceholder: '',
        endPlaceholder: ''
      },
      startPlaceholder: '发起开始日期',
      endPlaceholder: '发起结束日期',
      params: {
        pageSize: 10,
        pageNum: 1,
        orderState: 5
      },
      orderState: 5,
      tableData: [],
      totalItem: 0,
      businessArr: [],
      serviceArr: [],
      orderStatusArr: []
    }
  },
  created() {
    getFhbBsteType().then(data => {
      this.businessArr = data
    })
    getFhbServiceType().then(data => {
      this.serviceArr = data
    })
    getSubDictListOfParentCode('FHBSTATE').then(data => {
      this.orderStatusArr = data
    })
    this.httpGetTableData()
  },
  computed: {},
  watch: {
    activeName(val, oldVal) {
      if (val === '5') {
        this.startPlaceholder = '发起开始日期'
        this.endPlaceholder = '发起结束日期'
      } else if (val === '6') {
        this.startPlaceholder = '申诉开始日期'
        this.endPlaceholder = '申诉结束日期'
      } else {
        this.startPlaceholder = '退款开始日期'
        this.endPlaceholder = '退款结束日期'
      }
      this.httpGetTableData()
    }
  },
  methods: {
    disabledDate(time) {
      return time.getTime() < moment(this.search.allocationStartTime).format('x')
    },
    //  分页
    page(number) {
      this.params.pageNum = number
      this.httpGetTableData()
    },
    setSizeChange(size) {
      this.params.pageSize = size
      this.httpGetTableData()
    },
    httpGetTableData() {
      this.$ajax.table('/ms-fahuobao-json-view/FhbOrder/findFhbOrderAll', this.params).then(response => {
        if (response.success) {
          this.totalItem = response.totalItem
          response.data.forEach(item => {
            if (item.imgAddress) {
              item.imgAddress = (item.imgAddress.split(','))
            }
          })
        }
        this.tableData = response.data
      })
    },
    //  搜索
    searchFunc(search) {
      let params = copy(search, true)
      if (params.time && params.time.length) {
        params.operateStart = moment(params.time[0]).format('YYYY-MM-DD')
        params.operateEnd = moment(params.time[1]).format('YYYY-MM-DD')
        delete params.time
      } else {
        params.operateStart = ''
        params.operateEnd = ''
      }
      params.provinceNo = dotData(params.address, '[0]') || ''
      params.cityNo = dotData(params.address, '[1]') || ''
      params.districtNo = dotData(params.address, '[2]') || ''
      this.params = merge(this.params, params)
      this.httpGetTableData()
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      this.params.orderState = tab.name
      this.orderState = tab.name
      console.log(tab, event)
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    }
  }
}
</script>
